<template>
  <div class="info">
    <van-nav-bar title="我的资料">
      <template #left>
        <i
          @click="$router.push('/my')"
          class="iconfont iconbtn_nav_back myicon"
        ></i>
      </template>
    </van-nav-bar>
    <!-- 资料中心 -->
    <div class="myprofile">
      <div class="myPhotoBox">
        <van-cell
          title="头像"
          value="内容"
          is-link
          center
          @click="$router.push('/editInfo?ed=avatar')"
        >
          <template #default>
            <img class="myPhoto" :src="baesUrl + userInfo.avatar" alt="" />
          </template>
        </van-cell>
      </div>
      <div class="myprofile_bd">
        <van-cell-group>
          <van-cell
            title="昵称"
            :value="userInfo.nickname"
            is-link
            :border="false"
            @click="$router.push('/editInfo?ed=nickname')"
          />
          <van-cell
            title="性别"
            is-link
            :border="false"
            @click="gendershow = true"
          >
            <template #default>
              {{ columns[userInfo.gender] }}
            </template>
          </van-cell>
          <van-cell
            title="地区"
            :value="areaList.city_list[userInfo.area]"
            is-link
            :border="false"
            @click="areashow = true"
          />
          <van-cell
            title="个人简介"
            is-link
            :border="false"
            class="intro"
            @click="$router.push('/editInfo?ed=intro')"
          >
            <template #default>
              {{ userInfo.intro }}
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <div class="logout" @click="logout">
        退出登录
      </div>
    </div>
    <!-- 修改性别 -->
    <van-popup
      :close-on-click-overlay="false"
      v-model="gendershow"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        title="请选择性别"
        show-toolbar
        :columns="columns"
        @confirm="onGender"
        @cancel="gendershow = false"
        :default-index="userInfo.gender"
      />
    </van-popup>

    <!-- 修改地区 -->
    <van-popup
      :close-on-click-overlay="false"
      v-model="areashow"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-area
        title="请选择地区"
        :area-list="areaList"
        :columns-num="2"
        @cancel="areashow = false"
        @confirm="onarea"
        :value="userInfo.area"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { delLocal } from '@/utils/local'
import { apiEditInfo } from '@/api/au.js'
// 导入省市区数据
import areaList from '@/utils/area.js'
export default {
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  data () {
    return {
      baesUrl: process.env.VUE_APP_URL,
      // 性别弹出框
      gendershow: false,
      columns: ['未知', '男生', '女生'],
      // 地区
      areashow: false,
      areaList: areaList
    }
  },
  methods: {
    goBack () {},
    // 退出登录
    logout () {
      this.$dialog
        .confirm({
          title: '温馨提示',
          message: '您确认退出吗？'
        })
        .then(() => {
          delLocal('token')
          this.$router.push('/login')
          this.$store.commit('setUserInfo', '')
        })
        .catch(() => {})
    },
    // 修改用户性别
    async onGender (value, index) {
      this.$toast.loading({ duration: 0 })
      this.gendershow = false
      await apiEditInfo({ gender: index })
      this.$store.dispatch('setUserInfo')
      this.$toast.success('修改成功')
    },
    // 修改省市区
    async onarea (data) {
      this.$toast.loading({ duration: 0 })
      this.areashow = false
      // console.log(data[1].code)
      await apiEditInfo({ area: data[1].code })

      this.$store.dispatch('setUserInfo')
      this.$toast.success('修改成功')
    }
  }
}
</script>

<style lang="less" scoped>
.info {
  font-size: 12px;
  /deep/.van-nav-bar__left {
    padding-left: 0px;
  }
  /deep/ .van-nav-bar__title {
    font-weight: 600;
    font-size: 18px;
  }
  .myicon {
    font-size: 50px;
  }
  .myprofile {
    .myPhotoBox {
      margin: 15px;
      border-radius: 10px;
      overflow: hidden;
      height: 60px;

      .myPhoto {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        vertical-align: middle;
      }
    }
    .myprofile_bd {
      margin: 15px;
      border-radius: 10px;
      overflow: hidden;
      /deep/ .van-cell {
        padding: 15px;
      }
      .intro {
        // overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .logout {
      height: 50px;
      line-height: 50px;
      text-align: center;
      background: #fff;
      font-size: 16px;
      color: #e40137ff;
      margin: 0 15px;
      border-radius: 10px;
    }
  }
}
</style>
